import React from 'react';

import {
  ExclamationCircleOutlined, //info warning
  CheckCircleOutlined, //success
  CloseCircleOutlined, //danger
  CloseOutlined, //X
} from '@ant-design/icons';

import styles from './index.less';

type NotificationType = 'info' | 'success' | 'danger' | 'warning';

interface NotificationProps {
  itemKey: string;
  title: string;
  description: string;
  type: NotificationType;
  onClose: (key: string) => void;
}
const Notification: React.FC<NotificationProps> = (
  props: NotificationProps,
) => {
  const { itemKey, title, description, type, onClose } = props;
  const renderIcon = (
    notificationType: NotificationType,
  ): React.ReactElement => {
    let reactDom: React.ReactElement;
    switch (notificationType) {
      case 'success':
        reactDom = <CheckCircleOutlined style={{ color: '#52c41a' }} />;
        break;
      case 'danger':
        reactDom = <CloseCircleOutlined style={{ color: '#ff4d4f' }} />;
        break;
      case 'warning':
        reactDom = <ExclamationCircleOutlined style={{ color: '#faad14' }} />;
        break;
      case 'info':
      default:
        reactDom = (
          <ExclamationCircleOutlined
            style={{ color: '#1890ff', fontSize: '1.5rem' }}
          />
        );
        break;
    }

    return reactDom;
  };
  return (
    <div className={styles.notification} data-testid="test-message">
      <div className={styles.notificationContent}>
        <div className={styles.content}>
          <div className={styles.icon}>{renderIcon(type)}</div>
          <div>
            <div className={styles.title}>{title}</div>
            <div className={styles.description}>{description}</div>
          </div>
        </div>
        <div
          className={styles.close}
          onClick={() => {
            onClose(itemKey);
          }}
        >
          <CloseOutlined />
        </div>
      </div>
    </div>
  );
};

export default Notification;
